<template>
	<view class="user_box" @click="addAddress">
		<view class="addr_btn_box" v-if="JSON.stringify(addrs) === '{}'">
			<button class="addr_btn" size="mini" @click="addAddress">添加收货地址 + </button>
		</view>
		
		<!-- 渲染收货信息 -->
		<view class="addr_info_box" v-else>
			<view class="name_phone">
				<view class="name">收货人 : {{ addrs.userName }}</view> 
				<view class="phone">
					电话 : {{ addrs.telNumber }}
					<uni-icons type="arrowright" size="16" />
				</view> 
			</view>
			<view class="addr_box">地址 : {{ getAddr }}</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('store_user', ['addrs']),
			...mapGetters('store_user', ['getAddr'])
		},
		methods: {
			...mapMutations('store_user', ['updateAddrs']),
			
			// 添加收货地址
			async addAddress() {
				const [err, success] = await uni.chooseAddress().catch(err => err);
				
				// 判断地址
				(err === null && success.errMsg === "chooseAddress:ok") ? this.updateAddrs(success) : false
				
				// 判断用户没有授权
				(err && (success.errMsg === "chooseAddress:fail auth deny" || success.errMsg === "chooseAddress:fail authorize no response")) 
				? this.reAuth() : false
			},
			
			// 让用户重新授权
			async reAuth() {
				const [err2, comfirmResult] = await uni.showModel({
					content: '检测到您没有打开地址授权，是否打开？',
					comfirmText: '确认',
					cancelText: '取消'
				})
				
				if (err2) return
				
				console.log(comfirmResult)
				
				if (comfirmResult.cancel) return uni.$showMsg('您取消了地址授权！')
				if (comfirmResult.confirm) return uni.openSetting({
					success: (settingResult) => {
						// console.log(settingResult)
						settingResult.authSetting['scope.address'] ? uni.$showMsg('授权成功！请选择收货地址') : uni.$showMsg('您取消了授权!')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.user_box {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #DCDCDC;
		.addr_btn {
			background-color: #409eff;
			color: #fff ;
		}
		.addr_info_box {
			width: 90%;
			padding: 20rpx;
			.name_phone {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			.addr_box {
				width: 100%;
				padding-top: 10px;
			}
		}
	}
</style>
